import React from 'react'
// 引入store文件
import store from '../../store/store'
// 引入countAction文件
import {incrementAction,decrementAction,waitIncrementAction} from '../../store/actions/countAction'

export default function Count() {
    // 从store获取值,需要用到getState这个方法
    // 解构后面的这个.count是因为我们合并了reducer之后,用一个变量count去接收的countReducer对象
    const {count} = store.getState().count
    // 解构,用store.grtState()获取电影的条数
    const{movieList}=store.getState().movie
    
    const incrementHandle=()=>{
        // 当我们需要修改值的时候,就需要用到dispatch这个方法
        // 运行流程就是组件使用dispatch这个方法,参数是一个对象,type表示修改数据的类型是一个标识,data就是要修改的数据
        // 然后发送给store之后,store发送给reducer,reducer接收之后识别你的type来进行相应的操作
        store.dispatch(incrementAction(1))
    }
    const decrementHandle=()=>{
        store.dispatch(decrementAction(1))
    }
    const ifOddDecrementHandle=()=>{
        if(count%2!==0){
            store.dispatch(incrementAction(1))
        }
    }
    const waitincrementHandle=()=>{
        store.dispatch(waitIncrementAction(1))
    }
    return (
        <div>
            <h1>我是Count组件,我的值是{count }</h1>
            <h3>当前的电影总数是{movieList.length}</h3>
            <div>
                <button onClick={incrementHandle}>累加</button>
                <button onClick={decrementHandle}>累减</button>
                <button onClick={ifOddDecrementHandle}>遇到奇数就加1</button>
                <button onClick={waitincrementHandle}>等两秒在加1</button>
            </div>
        </div>
    )
}
